<template>
    <div class="processBox" v-if="list.length">
        <div class="childs">
            <div class="child" v-for="(item, index) in list" :key="item.id + '-child-' + index">
                <div class="child-item"
                    :style="{ marginRight: item.children && item.children.length > 1 ? '20px' : '' }">
                    <div class="childname" :id="item.id">
                        <div class="shows">
                            <slot :items="item">
                                {{ item.name }}
                            </slot>
                        </div>
                        <div class="position-arrow" v-if="list.length > 1">
                            <el-icon>
                                <Right />
                            </el-icon>
                        </div>
                        <div class="position-top" v-if="isFirst(item.id) && domready"
                            :style="position_top(item.id, 'top')"></div>
                        <div class="position-top" v-if="isLast(item.id)" :style="position_top(item.id, 'bottom')"></div>
                    </div>
                    <div class="childarrow"
                        :style="{ borderRight: item.children && item.children.length > 1 ? '2px solid #606266' : '3px solid transparent' }">
                        <div :class="item.children && item.children.length <= 1 ? 'long-img' : ''"></div>
                        <el-icon v-if="item.children && item.children.length">
                            <Right />
                        </el-icon>

                    </div>
                </div>
                <div class="child-children" v-if="item.children && item.children.length">
                    <processJson :list="item.children">
                        <template v-slot="item">
                            <slot :items='item.items' />
                        </template>

                    </processJson>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "processJson",
    components: {},
    data() {
        return {
            domready: false,
        };
    },
    props: {
        list: {
            type: Array,
            default: () => [],
        },
    },

    mounted() {
        this.$nextTick(() => {
            this.domready = true;
        });
    },
    methods: {
        position_top(id, position) {
            let dom = document.getElementById(id);
            let height;
            if (dom) {
                height = dom.clientHeight;
            }
            let rt;
            if (position === "top") {
                rt = {
                    height: height / 2 - 2 + "px",
                    top: 0,
                };
            }
            if (position === "bottom") {
                rt = {
                    height: height / 2 + 1 + "px",
                    bottom: 0,
                };
            }
            return rt;
        },

        isFirst(id) {
            return (
                this.list.length > 1 && this.list.map((x) => x.id).indexOf(id) === 0
            );
        },

        isLast(id) {
            return (
                this.list.length > 1 &&
                this.list.map((x) => x.id).indexOf(id) === this.list.length - 1
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.el-icon-right {
    font-weight: 600;
}

.processBox {
    justify-content: center;

    p {
        margin: 0;
        font-size: 13px;
    }

    display: flex;

    .father {
        width: 70px;
        background-color: red;
        padding: 100px 10px;
    }

    .childs {
        .child {
            display: flex;
            background-color: #fff;

            .child-item {
                display: flex;
                align-items: center;
                margin: 10px 0;

                .childname {
                    .shows {
                        text-align: left;
                        border: 1px solid #b4b4b4;
                        padding: 10px;
                        // height: 100px;
                        width: 100%;
                        box-shadow: 1px 2px 8px #00000033;

                        &:hover {
                            box-shadow: 1px 2px 8px #00000066;
                        }
                    }

                    cursor: pointer;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    text-align: center;
                    justify-content: center;
                    position: relative;
                    padding: 10px 0;

                    .position-arrow {
                        position: absolute;
                        // top: 50%;
                        left: -22px;
                    }

                    .position-top {
                        position: absolute;
                        width: 3px;
                        background-color: #fff;
                        left: -23px;
                        height: 10px;
                    }
                }

                .childarrow {
                    height: 100%;
                    // border-right: ;
                    display: flex;
                    align-items: center;
                }
            }
        }

        .child-children {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    }

    .long-img {
        width: 20px;
        height: 2px;
        background-color: #606266;
    }

    .icon_arrow {

        // margin-left: 20px;
        &:after {
            width: 30px;
            height: 1px;
            background-color: #000;
        }
    }
}
</style>